<template>
  <div>
         <el-card class="box-card">
    <div class="header" slot="header">城市区域数据编辑</div>  
    <el-form ref="form" v-model="optionsCity" label-width="80px">
        
      <el-form-item label="区域Id">
        <el-input v-model="areaId" disabled></el-input>
      </el-form-item>
       <el-form-item label="城市Id">
        <el-input v-model="Id" disabled placeholder="显示城市Id"></el-input>
      </el-form-item>
      <el-form-item label="区域名称">
        <el-input v-model="text" placeholder="请输入区域名称"></el-input>
      </el-form-item>
      <el-form-item label="城市名称">  
        <el-select v-model="Id" placeholder="请选择城市">
          <el-option
            :label="item.name"
            :value="item.cityId"
            v-for="(item) in optionsCity"
            :key="item.cityId"
            @click.native="chiseCity(item)"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit">提交</el-button>
        <el-button @click="cleartext">取消</el-button>
      </el-form-item>
    </el-form>
         </el-card>
  </div>
</template>
<script>

export default {
  data() {
    return {
     
      Id:"",
      text:"",
      a:"",
      areaId:"",
       loading:false,

       optionsCity:[]
     
    };
  },
  methods: {
    //点击选择城市
    chiseCity(city){
      console.log("city",city)
      this.Id=city.cityId
    },

    //清空文本
    cleartext(){
      this.text=""
      
    },

    // 获取城市的数据
 getCity() {
      const url = "/city/allCity";
      this.$axios
        .get(url)
        .then(res => {
        
          this.optionsCity=res.cities
            console.log("城市的值：",  this.optionsCity);         
        })
        .catch(err => {
          console.log("获取数据失败");
        });
    },

    //获取数据
    getdata(areaId){
  const url ='/area/findById?areaId='+areaId
    this.$axios.post(url).then(res=>{  
      this.Id=res.area.cityId
      this.text=res.area.name
      console.log("获取的res",res)
    }).catch(err=>{
      this.$message.error(err);
    })
    },
    onSubmit() {
      console.log("传过来的Id",this.areaId)
      console.log("Id",this.Id)
      console.log("text",this.text)
var cityName=""
      for(var i=0;i<this.optionsCity.length;i++){
        if(this.optionsCity[i].cityId==this.Id){
        cityName=this.optionsCity[i].name
        }
      }
      console.log("cityName",cityName)
        let data={
           areaId: this.areaId,
            cityId: this.Id,
            cityName:cityName,
            name: this.text
        }
        this.loading = true;
        let url = "/area/edit"
        this.$axios.post(url,data).then(res=>{          

            console.log("res",res)
             this.$message.success("修改成功");
             var $this=this //注意定定时器里，this指向的是Window,但我们需要指向VueComponent
             setTimeout(function(){
                this.loading=false
               console.log("this",this)
               console.log("$this",$this)
               $this.$router.push('/area/list')
             },5000)
        }).catch(err=>{
            this.loading=false
            console.log("修改",err)
              this.$message.error("修改失败");
        })        
        console.log("this.loading",this.loading)    
    }
  },
  created() {
    this.getCity()
    this.areaId=this.$route.params.areaId
   this.getdata(this.areaId)  
  },
};
</script>> 

<style lang="less" scoped>
     .header{
    font-size: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    }
    .el-input,.el-select{
      width: 500px;
    }
      .box-card {
  width: 100%;
  height: 85vh;  

}
</style>